{% extends "web/base.html" %}
{% load static from staticfiles %}

{% block mylink %}
	<link rel="stylesheet" type="text/css" href="{% static 'web/css/member.css' %}">
	<link rel="stylesheet" type="text/css" href="{% static 'web/css/member-app.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'web/css/register.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'web/css/order.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'web/css/order-app.css' %}">
	<style type="text/css">
	    #tips {
            float: left;
            margin: 2px 0 0 20px;
        }

        #tips label {
            float: left;
            height: 20px;
            margin-left: 5px;
            margin-right: 10px;
            line-height: 20px;
        }

        #tips span {
            float: left;
            width: 45px;
            height: 20px;
            color: white;
            background: #97cbff;
            margin-right: 2px;
            line-height: 20px;
            text-align: center;
        }
    </style>
{% endblock %}

{% block mainbody %}
<!-- 主内容区域 -->
<div class="mainbody order">
	<div class="container">
		<!-- 面包屑导航 -->
		<div class="crumbs ">
			<ol class="breadcrumb">
				<li class="hidden-xs hidden-sm"><a href="{% url 'index' %}">首页</a></li>
				<li class="hidden-xs hidden-sm"><a href="{% url 'vip_info' %}">我的商城</a></li>
				<li class="active">重置密码</li>
			</ol>
		</div>
		<!-- 面包屑导航 E-->
		
		<div class="main clearfix">
			<!-- 左侧导航 -->
			<div class="left-nav f-fl col-md-4 hidden-xs hidden-sm">
				<div class="nav-main">
					<a href="javascript:;" class="type-title"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>订单中心</a>
					<a href="{% url 'vip_orders' %}?state=" class="ml" >我的订单</a>
					<a href="#" class="ml " >我的回购单</a>
					<a href="#" class="ml " >我的意外保</a>
					<a href="{% url 'vip_info' %}" class="type-title"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>个人中心</a>
					<a href="#" class="ml " >地址管理</a>
					<a href="#" class="ml " >我的收藏</a>
					<a href="#" class="ml " >消息提醒</a>
					<a href="#" class="ml ">建议反馈</a>
				</div>
			</div>
			<!-- 左侧导航 E-->

			<!-- 右侧内容展示 -->
			<hr/>
			<div class="right-content f-fr col-md-8 col-xs-12 col-sm-12">
				<div class="info-main">
				    <!--重置会员密码信息表单-->
				    <form id="edit-profile" action="{% url 'vip_doresetps' %}" class="form-horizontal" method="post" onsubmit="return check(this)">
				        {% csrf_token %}
		        		<table width="100%">
					        
		        			<tr height="35">
					            <th width="150" style="padding:10px;text-align:right;"></th>
					            <td style="padding-left:5px;padding-right:5px;">
					            	<div id="warning-box" class="tip-box" style="{% if info %}width:300px;margin-top:5px;margin-bottom:5px;display:block;{% else %}width:300px;margin-top:5px;margin-bottom:5px;display:none;{% endif %}">
							            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
								            <i class="glyphicon glyphicon-exclamation-sign"></i>
								            <span id="warning-span" class="tip-font">{{info}}</span>
								            <span aria-hidden="true" class="cha">&times;</span>
							            </button>
					        		</div>
					            </td>
							</tr>	
					        
					        <tr height="50">
					            <th width="150" style="padding:10px;text-align:right;">账号：</th>
					            <td style="padding:5px;">
					            	<input type="text" name="username" class="input-xlarge" id="input01" value="{{ request.session.vipuser.username }}" disabled style="border-radius:4px;border:1px solid #DBDBDB;outline:none;width:300px;padding:4px;"/>
					            </td>
							</tr>		        			
					        <tr height="50">
					            <th width="150" style="padding:10px;text-align:right;">真实姓名：</th>
					            <td style="padding:5px;">
					            	<input type="text" name="name" class="input-xlarge" id="input01" value="{{ request.session.vipuser.name }}" disabled style="border-radius:4px;border:1px solid #DBDBDB;outline:none;width:300px;padding:4px;"/>
					        	</td>
					        </tr>
					        <tr height="50">
					            <th width="150" style="padding:10px;text-align:right;">原密码：</th>
					            <td style="padding:5px;">
					            	<input type="password" name="oldpassword" class="input-xlarge" id="pass00" style="border-radius:4px;border:1px solid #DBDBDB;outline:none;width:300px;padding:4px;"/>
					            </td>
					        </tr>
					        <tr height="50">
					            <th width="150" style="padding:10px;text-align:right;">新密码：</th>
					            <td style="padding:5px;">
					            	<input type="password" name="password" class="input-xlarge" id="pass01" style="border-radius:4px;border:1px solid #DBDBDB;outline:none;width:300px;padding:4px;"/>
					            </td>
					        </tr>
					        <tr height="20">
					            <th width="150" style="padding:10px;text-align:right;"></th>
					            <td style="padding:5px;">
					            	<div id="tips">
					            		<label>强度</label><span></span><span></span><span></span><span></span><span></span>
					            	</div>
					            </td>
					        </tr>
					        <tr height="50">
					            <th width="150" style="padding:10px;text-align:right;">重复密码：</th>
					            <td style="padding:5px;">
					            	<input type="password" name="repassword" class="input-xlarge" id="pass02" style="border-radius:4px;border:1px solid #DBDBDB;outline:none;width:300px;padding:4px;"/>
					            </td>
					        </tr>

					        <tr height="50">
					        	<th width="150" style="background-color:#eee;padding:10px;text-align:right;"></th>
					        	<td align="left" style="background-color:#eee;padding:5px;">
									<button type="submit" class="btn btn-mini btn-primary">修改</button> 
									<button type="reset" class="btn btn-mini btn-inverse" style="border:1px solid #aaa;">重置</button>
								</td>
					        </tr>
					    </table>
						<!--<fieldset>
						    <div class="control-group">
						        <label class="control-label" for="input01">账号：</label>
						        <div class="controls">
						            <input type="text" name="username" class="input-xlarge" id="input01" value="{{user.username}}" readonly="true"/>
						        </div>
						    </div>
						    <div class="control-group">
						        <label class="control-label" for="input01">真实姓名：</label>
						        <div class="controls">
						            <input type="text" name="name" class="input-xlarge" id="input01" value="{{user.name}}" readonly="true"/>
						        </div>
						    </div>
						    <div class="control-group">
						        <label class="control-label" for="pass00">旧密码：</label>
						        <div class="controls">
						            <input type="password" name="oldpassword" class="input-xlarge" id="pass00"/>
						        </div>
						    </div>
						    <div class="control-group">
						        <label class="control-label" for="pass01">新密码：</label>
						        <div class="controls">
						            <input type="password" name="password" class="input-xlarge" id="pass01"/>
						        </div>
						    </div>
						    <div class="control-group">
						        <label class="control-label" for="tips"></label>
						        <div id="tips"><label>强度</label><span></span><span></span><span></span><span></span><span></span></div>
						    </div>
						    <div class="control-group">
						        <label class="control-label" for="pass02">重复密码：</label>
						        <div class="controls">
						            <input type="password" name="repassword" class="input-xlarge" id="pass02"/>
						        </div>
						    </div>

						    <div class="form-actions">
						        <button type="submit" class="btn btn-primary">修改</button> <button type="reset" class="btn">重置</button>
						    </div>
						</fieldset>-->
				    </form>
				    <!--重置会员密码信息表单 E-->
				</div>
			</div>
			<!-- 右侧内容展示 E-->
		</div>
	</div>	
</div>
<!-- 主内容区域 E-->

<script type="text/javascript">
    //检测密码值强度
    function checkStrong(val) {
        var modes = 0;
        if (val.length < 6) return 0;
        if (/\d/.test(val)) modes++;    //数字
        if (/[a-z]/.test(val)) modes++; //小写
        if (/[A-Z]/.test(val)) modes++; //大写  
        if (/\W/.test(val)) modes++;    //特殊字符
        if (val.length > 12) return 4;
        return modes;
    };

    //输入密码时检测密码强度
    $(function() {
        var aStr = ["弱爆", "弱", "中", "强", "牛逼"];

        $("#pass01").keyup(function() {
            var val = $(this).val();
            var num = checkStrong(val);
            switch (num) {
                case 0:
                    $("#tips span").css('background', 'yellow').text('').eq(num).css('background', 'red').text(aStr[num]);
                case 1:
                    $("#tips span").css('background', 'yellow').text('').eq(num).css('background', 'red').text(aStr[num]);
                    break;
                case 2:
                    $("#tips span").css('background', '#97cbff').text('').eq(num).css('background', 'green').text(aStr[num]);
                    break;
                case 3:
                    $("#tips span").css('background', '#97cbff').text('').eq(num).css('background', 'green').text(aStr[num]);
                    break;
                case 4:
                    $("#tips span").css('background', '#97cbff').text('').eq(num).css('background', 'green').text(aStr[num]);
                    break;
                default:
                    break;
            }
        })
    })

    //表单提交前进行数据校验
    function check(form){
        //校验密码长度
        var password = form.password.value;
        if (password.length < 6){
            //alert("密码长度小于6位！");
            $("#warning-span").text("密码长度小于6位！");
            $("#warning-box").show();
            form.password.focus();
            return false;
        }

        //校验密码强度
        if (checkStrong(password) <= 1){
            //alert("密码强度弱，请输入6位以上的字母、数字或符号！");
            $("#warning-span").text("密码强度弱，需6位以上字母和数字！");
            $("#warning-box").show();
            form.password.focus();
            return false;
        }

        //校验重复密码是否一致
        var repassword = form.repassword.value;
        if (password != repassword){
            //alert("两次输入密码不一致！");
            $("#warning-span").text("两次输入密码不一致！");
            $("#warning-box").show();
            form.repassword.focus();
            return false;
        }

        return true;
    }
</script>
{% endblock %}
